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CROSS-REFERENCES TO RELATED APPLICATIONS 
[0001] This application claims priority from co-pending U.S. Provisional Patent 
5 Application No. 60/410,5 10 filed September 13, 2002 entitled "Browser User Interface" 
which is hereby incorporated by reference, as if set forth in full in this document, for all 
purposes. 

FIELD OF THE INVENTION 
[0002] The present invention relates to user interfaces in general and more 
10 particularly to a browser interface for browsing pages served over a network. 

BACKGROUND OF THE INVENTION 
[0003] The Internet and other networks interconnect computers and computing 
devices to allow for easy transport of data over network connections. Commonly computers 
and computing devices are organized using the client-server model, wherein network 

15 connections are established between some computers or computing devices that act as servers 
and some computers or computing devices that act has clients. Of course, some computers or 
computing devices can act as servers and clients. 

[0004] An example of a server is a Web server and an example of a client is a Web 
client such as a personal computer running a Web browser program. Many different Web 

20 clients have been developed and variations of Web clients are being developed regularly. 
Merely by way of example, a Web client could be embodied in a desktop computer, laptop 
computer, handheld device, cellular telephone, wireless device, electronic device with 
embedded Web client functionality, or the like. Generally, all that is required is some user 
interface and a network interface. 

25 [0005] In some instances the user interface is an interface to a programmatic user, but 

more typically the user interface is an interface usable by a human user. The Web client 
operates according to the interface to issue requests to Web servers, using well-known 
protocols or later developed protocols. In response to requests received, Web servers return 
data responses. In a typical description of Web client-server interaction, the HTTP protocol 

30 is assumed to be used, wherein the Web client issues a request directed at a particular Web 
server address for a page represented by a URL in the request and a server responsive to the 
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particular Web server address responds with data that may be a page to be displayed or other 
data set. Generally, regardless of the actual data being requested and returned, the data 
returned is referred to as a web page. 

[0006] A Web client that is capable of presenting all or part of a web page in a user 
5 interface to a user and accepting user input wherein at least some of the user input can cause 
the Web client to present further web pages can be referred to as a "Web browser" because of 
its common use by a user to navigate among web pages generally considered to be part of a 
"Web" of pages that reference other pages. 

[0007] Web browsers are known and are in common use and often provide 

10 functionality in addition to presenting web pages and accepting user input related to 

presented web pages. For example, web pages might include program elements that are 
executed by a Web browser upon receipt of a web page including such program elements. 
One example of such program elements are JAVA™ applets. 

[0008] Web pages also might include program elements that cause a Web server to 

15 take an action. For example, a web server might provide portal services, wherein the Web 
server collects information from various sources and upon request generates a portal page for 
a Web client. An example of such a portal page is the main Yahoo! page (www.yahoo.com) 
and personalized pages provided by My Yahoo! (my.yahoo.com). The latter provides for 
pages to be delivered to Web clients that are customized based on user preferences stored at 

20 the server. 

[0009] Customized web pages and varied layouts often provide a rich user 
experience, but if the presentation of information requires moving from web page to web 
page, the experience is less favorable when network delays occur, as the user waits for pages 
to arrive and refresh. The experience can also be disorienting if the user has to move from 
25 page to page to see desired information. While network delays can occur and are typically 
beyond the control of the web server operator, users typically associate negative experiences 
due to network delays with the services provided by the web server operator. Therefore, it 
would be desirable to mitigate perceived delays that might be caused by network delays. 

BRIEF SUMMARY OF THE INVENTION 
30 [0010] In a client-server system where a client system presents a browser for user 

interaction with server data or resources, a browser user interface includes functionality to 
request pages from servers over a network and to process received pages for presentation to a 
browser user, the browser user interface comprising a graphical display, a user input device 
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and storage for dynamic interface elements received by the browser in connection with 
received pages, wherein a dynamic interface element is able to be presented as part of the 
browser user interface and modified in response to selected user input without requiring 
further interaction with a server. In addition to, or in place of, dynamic interface elements 
5 such as slide sheets, the browser user interface might also include a rotation display area, tool 
displays that can overlay a page, opaquely or semi-transparently, menu structures, and an 
ability for the user to modify a page layout without requiring server interaction. 

[0011] The rotation display area might comprise some or all of a display area used for 
a page display and the browser further comprising storage for a plurality of rotation display 

10 items for storing a summary and a primary presentation for each rotation display item, logic 
for displaying, by the browser, primary presentations for less all of the plurality of rotation 
display items in the rotation display area, logic for displaying, by the browser, summaries for 
items wherein the number of summaries is greater than the number of primary presentations 
presented at one time, logic for highlighting, among the summaries displayed, the ones of the 

15 summaries that correspond to the primary presentations displayed in the rotation display area; 
and logic for rotating the plurality of rotation display items to display primary presentations 
for a different subsets of the rotation display items and for updating highlighting of 
summaries to correspond to the different subsets of rotation display items. 

[0012] Other features and advantages of the invention will be apparent in view of the 

20 following detailed description and preferred embodiments. 

BRIEF DESCRIPTION OF THE DRAWINGS 
[0013] Fig. 1 is a block diagram of a computer system according to embodiments of 
the present invention. 

[0014] Fig. 2 is a swim diagram of client-server interactions as might be done with 
25 the computer system of Fig. 1 . 

[0015] Fig. 3 is an illustration of an advanced search slide sheet. 
[0016] Fig. 4 is an illustration of a dynamic item and summary display, as might be 
used to show news headlines and text. 

[0017] Fig. 5 is an illustration of a tool layer. 
30 [0018] Fig. 6 is an illustration of navigation using layers. 

[0019] Fig. 7 is an illustration of a personalized page having tools. 
[0020] Fig. 8 is an illustration of a promotional and/or information tool layer with 
rotating spaces. 



3 



DETAILED DESCRIPTION OF THE INVENTION 
[0021] The present invention has many applications, as will be apparent after reading 
this disclosure. In describing an embodiment of a browser interface system according to the 
present invention, only a few of the possible variations are described. Other applications and 
5 variations will be apparent to one of ordinary skill in the art, so the invention should not be 
construed as narrowly as the examples, but rather in accordance with the appended claims. 

[0022] Embodiments of the invention will now be described, by way of example, not 
limitation. It is to be understood that the invention is of broad utility and may be used in 
many different contexts. 

10 [0023] The example of a browser session is a user at a user location operating a user 

computer to control a browser, which is typically software running on a general purpose user 
computer, but might be another device, such as a dedicated hardware browser or firmware 
operated by a portable device. The browser sends requests over a network for pages or 
portions of pages and displays received pages or portions of pages. The browser might also 

1 5 maintain local data storage for cookies, cached pages, scripts, code and the like. Typically* 
the browser requests are directed over the network to page servers, such as HTTP (HyperText 
Transport Protocol) servers (also called "web servers" as the pages served are often 
considered part of the World Wide Web of hyperlinked documents). The user can be a 
human or a machine, but is more often a human user. 

20 [0024] A "page" might be a conventional HTML page returned in response to a 

browser request, which can be a pre-existing page or a page generated in response to the 
request. The page might contain display portions, formatting portions and executable 
portions. As used herein, the term page might refer to HTML pages, messages, data blocks, 
packets, or other structured or unstructured data units that are considered logic units in a page 

25 request system. 

[0025] Referring now to the figures, an exemplary browsing system will now be 
described. 

[0026] Fig. 1 is a block diagram of a system 100 according to embodiments of the 
present invention. Using system 100, a user can operate a client system 102 running a 
30 browser to send requests 104 for pages and receive responses 106 to those requests from 
servers 108. Responses 106 are typically pages, but under error conditions, such as when a 
page does not exist, a request is malformed, a server is not available or the requesting user 
does not have access authority, response 106 might be an error message or an error page. 
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[0027] Fig. 1 shows only one client and one server, but it should be understood that 
the typical system might have many clients and many servers. As shown, server 108 is a 
separated from client system 102 by a network 1 10, in this case a global internetwork of 
networks known as the "Internet'*. The bandwidth and responsiveness of a client-the server 
5 path through network 110 can sometimes diminish the browsing experience. Since the 
typical browsing system can handle the necessary computing tasks quickly, the network 
and/or servers are more typically the cause of bottlenecks and slowdowns. However, by 
using some of the techniques described herein, a browsing system can make requests and a 
server can respond with pages having features that can provide responsiveness to the user 

10 even in the face of network slowdowns. 

[0028] Fig. 2 is a swim diagram illustrating actions and flows between a client (such 
as the user's browser) and a server, wherein each communicates using a protocol such as 
HTTP and/or its extensions. The steps executed by the client or server are labelled in the 
order shown with labels "SI", "S2", "S3", etc. Other steps, not shown, might also be 

15 performed and not all of the labelled steps need be performed. 

[0029] Once the user initiates an instance of the browser (SI), the browser can accept 
input from the user. In this example, the user has requested the page identified by the URL 
(Uniform Resource Locator) "http://PLUS.yahoo.com/index.html" and the browsers gets this 
request from the user (S2). The browser can get the request by the user typing in the URL, 

20 selecting from a bookmark list, clicking on a link of a displayed page or other method. The 
browser then sends an HTTP request to the server identified with the domain portion of the 
URL of the request (i.e., "PLUS.yahoo.com" in this example). 

[0030] Once the server receives the request (S3), it retrieves the page (S4) and sends 
it to the requesting browser (S5). The page might contain HTML data, such as page text, 

25 formatting and the like, but would also contain dynamic elements. One standard for such 
dynamic elements is the DHTML (Dynamic HyperText Markup Language) standard. Once 
the browser receives the page (S6), the browser processes the page (S7) and displays the 
selected layers to the user (S8). 

[0031] With the selected layers of the DHTML pages displayed, the user might then 

30 select an element on the display to cause an action. Some selection might be done by 

positioning a cursor over an element, while other selection might also include indicating a 
selection such as by pressing a mouse button with the cursor over an element. Of course, to 
the browser, the happenstance presence of a cursor somewhere on the display can be treated 
as a positioning selection, so that the action taken by positioning a cursor might be taken even 
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if the user did not change the position of the cursor as would normally be expected for what is 
understood as "selecting". 

[0032] However a selection action or event is noted, the browser detects or interprets 
user input (S9) and then takes an action for that selection based on the DHTML code for the 
5 element selected (S10). Examples of pages and elements are described below. While 
DHTML has been in use for presenting content and positioning content, examples shown 
below provide for tools with interface elements (e.g., buttons, forms) on layers and/or uses of 
layers for interfacing. 

[0033] Fig. 3 illustrates a portion of a page 300 with dynamic interface elements. 

10 Page 300 is passed to a browser as a DHTML page, with all the components needed for the 
interface included in the DHTML page. This allows the browser to respond to user actions 
without requiring another request to be sent to a server, possibly delaying the response. As 
shown there, a "slide sheet" 301 for advanced searching descends from a search toolbar when 
activated, either by the user selecting the "advanced search" button or merely rolling a cursor 

15 over the button. 

[0034] With the advanced search slide sheet, the user can perform advanced searches 
without appearing to move away from a current page being displayed, as the search toolbar 
could be part of the currently displayed page, with opening the slide sheet only obscuring a 
part of that displayed page. 

20 [0035] The DHTML "advanced search" link can be represented by a text element 302 

or a graphical element, possibly providing a consistent visual language to denote such 
dynamic links. When a user has not selected the advanced search, the slide sheet remains 
hidden and when selected, appears to slide down from behind the toolbar. The slide sheet can 
contain various advanced search option elements. A tabular navigation system can be used 

25 within the slide sheet if advanced options need to be separated into sections. Depending on 
the display real estate available for the slide sheet and the number of elements to be 
presented, the slide sheet might also include scroll elements to allow for scrolling of the 
elements within the real estate allotted. In some implementations, the slide sheet could be 
vertically expandable so that the user can control the real estate used, possibly obviating the 

30 need for the scroll bar. 

[0036] Within the slide sheet shown, a "search" button 306 is provided that might 
initiate an action that works the same way, or in a similar way, as a "search" button 308 
provided in the search toolbar and usable even when slide sheet 301 is hidden. The user can 
close slide sheet 301 by completing a search, clicking on either search button, clicking 
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outside the slide sheet, clicking the "advanced search" element 302 again or by clicking the 
"x" close window icon on the top right corner of slide sheet 301 . 

[0037] Such a search slide sheet might be used in various areas of a portal site, such 
as a main page, a music page, a movies page, a games page, a sports page, a local 
5 new/information page and/or a news page. A finance page might incorporate a similar tool 
for functions such as ticker look up. If each of those pages has different search elements, the 
side sheets can be different for different pages. The selections made by the user on the slide 
sheet, or other dynamic interface element, can be stored at the client system and conveyed to 
the server that sent the page (or other designated server) asynchronously or synchronously 

10 (blocking). For example, one server might provide a page to a browser that designates a 
second server as the server to collect user input collected from a dynamic interface element. 
Preferably, if a delay is possible all, the client system might take an action based on user 
input on a dynamic interface element even before a server receives the collected user input. 

[0038] In some cases, a user might request a page having such DHTML elements, but 

15 not have a browser capable of processing DHTML constructs. In such cases, the DHTML 
page would be configured to substitute other functionality. For example, when a user with a 
non-enabled browser selects advanced search element 302, they would be directed to an 
HTML page for advanced search, typically taking the user away from the page containing the 
element. 

20 [0039] In another instance, dynamic content delivery is provided within a page using 

dynamic interface elements, thus allowing the user to remain with a page and see additional 
elements. An example of such a dynamic content delivery construct is shown in Fig. 4. With 
such a construct, a number of summaries of items are shown, with one of the items shown. In 
this example, the items are news stories and the summaries are headlines, but other types of 

25 items are possible. 

[0040] Dynamic layer 400 is used for display of an item 402 and summaries 404 for 
that item and other items. The summary corresponding to the display item, summary 406 in 
this case, is shown with a visual cue 408, thus allowing the user to quickly identify which 
headline is being shown in greater detail above. If the displayed item has associated images 

30 or video, or other media, it can be displayed in area 410. Depending on the selection and/or 
cursor position, the browser might (according to instructions in the page provided by a 
server) transition automatically through each of the items, showing it in turn and stopping 
when the user selects a specific item, either by clicking on the item, clicking on the summary, 
moving the cursor to the summary, or taking another indicative action. 
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[0041] This content delivery mechanism might be found on main pages within 
properties of a portal web site. In a main news page, top and featured stories can be 
dynamically rotated in order to serve up more information to the user. The user is able to 
interrupt the rotation by directly selecting a particular top story from a short list featured on 
5 the page, or maybe by just moving the cursor into an item display area or holding down a 
key. To get the full story (more than just the item shown, in most cases), the user can select 
the item or the headline. 

[0042] The automatic transitioning between items can be done in a number of ways. 
For example, the browser could rotate through the items, fading out one and fading in 

1 0 another. One way to do this is to have the current item in one layer, the next item on another 
layer, with the next item's layer being transparent and on top of the current layer and 
gradually increase the opacity of the next item's layer. Alternatively, the current layer might 
be opaque and on top with that layer gradually becoming more transparent. In some cases, 
where the items contain media that take time to display, the rotation of a current item out and 

15 a next item in might be tied to when the current item is done displaying, such as beginning 
the transition shortly after the current item is done playing. Where controls are provided to 
control the playing of media, such as rewind, pause and fast forward, the user might control 
when the rotation occurs. In any case, the browser should delay enough to allow for 
comfortable reading of the text presented and present a visual and/or audio cue that a 

20 transition is to begin. 

[0043] When the display transitions from one item to another, the visual cues, such as 
visual cue 408 would change to the now current item. The order of rotation can be random or 
defined by some set of rules, but an expected order might be from top to bottom, repeating 
the top item when the bottom item is rotated out. The list of item summaries (and thus the 

25 items) might be sorted at the server by importance or interest. 

[0044] In addition to the rotated in items and their summaries, dynamic layer 400 
might also provide links such as "more top stories" and "see related stories" that take the user 
away from the current page to new pages, as with conventional links. 

[0045] Other cues might be provided to the user. For example, a cue might be 

30 provided when a user rolls a cursor over the highlighted story to indicate that the rotation is 
paused. To avoid jarring actions, the browser (again controlled by instructions from the 
page) might delay action on a roll over for a few seconds and then perform a smooth 
transition. 
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[0046] Since each of the transitions between items and navigation among elements of 
dynamic layer 400 can be handled by the browser without reference to a server, the user 
interaction can happen quickly without concern for network activity or bottlenecks. If 
statistic information on views is needed, the page can collect status messages and send those 
5 to the server (useful for determining which items are of interest over a large audience and 
which are not), but such server interaction does not delay the display experience. 

[0047] Such a dynamic layer page might be used in various areas of a portal site, such 
as a main page, a music page, a movies page, a games page, a sports page, a local 
new/information page and/or a news page. In some cases, a user might request a page having 
1 0 such DHTML elements, but not have a browser capable of processing DHTML constructs. 
In such cases, the DHTML page would be configured to substitute other functionality. For 
example, a user with a non-enabled browser might be presented with the items and 
summaries, but have to select a summary to view the item. 

[0048] Where the item includes a video object, that object can be presented directly, 
15 via a plug-in or the like, in one of the layers. With the video handled directly, opening an 
external player is not needed, thus making the pages more flexible. For example, the area 
allocated to the video could be automatically adjusted based on a detected aspect ratio, and 
the area can be expanded or contracted by the user without requiring a reload of the video 
stream. 

20 [0049] Another example of a use of dynamic pages is shown in Fig. 5. There, a tool 

layer 500 is shown. Tool layer 500 allows users to perform popular activities and/or actions 
without leaving a page of focus. Tool layer 500 includes buttons, such as buttons 502 that 
react in some ways when they are rolled over to indicate their rich dynamic functionality, 
such as highlighting and a tool tip after a delay. The page includes DHTML layer(s) with all 

25 the necessary interactive elements for the user to complete the activity or action, typically 
without requiring communication with the server. For a wizard-like activity or tour, this 
module can be self-contained and close upon completion, with the user inputs recorded at the 
client system, being transmitted to a server as needed. 

[0050] When a tool is selected, by a click or otherwise, the user is presented with a 

30 DHTML layer (preferably, through a consistent visual transition) wherein the interactive 
elements necessary to complete the task are contained. Links contained within this module 
typically pop up another browser window. 

[0051] Such tool layers can be used in a number of ways. For example, a main portal 
page might include a tool button for sending an e-mail. In response, the browser could 
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present a new layer for entry of the e-mail, without the user perceiving any direction away 
from the main portal page. Furthermore, since the e-mail layer is part of the page already at 
the browser, the opening of the layer and the restoring of the main page will not be delayed 
by network or server delays. Other uses might include website services for quickly uploading 
5 files, calendar updates, photo uploading, searches, yellow page inquiries, etc. 

[0052] For a layer such as an e-mail layer, the portion used for entry of the e-mail can 
be semitransparent, to keep the user oriented with the page from which the e-mail function 
was selected. This will often result in a less disorienting, cleaner presentation. Fading can be 
provided as well. 

10 [0053] To accommodate browsers without dynamic page or DHTML capability, the 

server could detect, by "sniffing" or otherwise, whether a browser is enabled and then serve 
up the dynamic page or fall back to a separate page without the tool capability. 

[0054] In addition to dynamic pages that include user interface elements, such as 
buttons and forms, some dynamic pages might operate without such elements. For example, 

15 Fig. 6 shows the use of layers for subnavigation. One implementation of subnavigation 
layers is using a DHTML pop-up that reveals the subsections and/or subcategories of main 
menu items. The submenus can be revealed when the user rolls over links on the main menu. 
If the main menu does not have an apparent set of subnavigation items, this layer might be 
used to describe the menu item and/or provide quick links to popular subsections within that 

20 item. 

[0055] In some systems, to keep the interaction simple, the selected menu item is 
highlighted when selected and a limited number of sub levels (such as one sublayer) are used. 
In the example of Fig. 6, when the user rolls over a top level menu, the subsection DHTML 
menu or description will appear on the right side. The DHTML submenu should remain open 

25 as long as the cursor remains in the main menu item selected or in the DHTML submenu 
itself, but DHTML submenus disappear when user rolls away from the selected item or the 
DHTML menu itself. 

[0056] Such layers might be used in various areas of a portal site, such as a main 
page, a music page, a movies page, a games page, a sports page, a local new/information 

30 page and/or a news page. In some cases, a user might request a page having such DHTML 
elements, but not have a browser capable of processing DHTML constructs. In such cases, 
the DHTML page would be configured to substitute other functionality, such as showing the 
submenu items beneath menu items in a flattened, indented menu and, for menu items that do 
not have subsections, take the user to the page itself when the link is clicked. 

10 



[0057] Some pages can be complex combinations of constructs described above. For 
example, Fig. 7 shows a "personal assistant" set of layers for performing tasks specific to the 
user. In some cases, the dynamic (DHTML or other protocol) page used can be cached by 
the user so that the servers do not have to repeatedly send a user's page to the user, for 
5 thousands or millions of users. This can be so even if the content of the page were to change 
as the cached page could include placeholders for information that is retrieved from a server 
each time the page is used, even if the page itself is not retrieved each time. 

[0058] With the personal assistant set of layers, an "assistant" module within certain 
properties is provided where content, tools, features and promotions are presented up front 
10 based on the user's preferences, which can be managed actively or passively. The 

customization might comprise event alerts (i.e., auctions results, concert tickets going on sale, 
etc.), information alerts (news, finance), promotions (new product release) or personal 
information (bills due, etc.). Preferably, the list is limited to some number (such as 10) 
entries to avoid clutter and has links that lead to the items themselves. For example, an "edit" 
15 link allows the user to edit their preferences on a separate page. This separate page will 

contain explicit items and preferences the user chooses, permission for promotional items to 
be featured, permission for passive personalization to be used, promotion or news of 
upcoming personalization features, etc. A "more" link might reveal additional 
personalization items through a vertically expandable DHTML slide sheet if the module 
20 cannot initially contain all items. 

[0059] If the user has not personalized their module, it will contain promotion, 
instruction, or tour for the Assistant module. When the Assistant is personalized, it will 
contain a finite list of items actively or passively customized to the user's preferences. The 
items listed might contain links, which when clicked will allow users to interact further with 
25 that specific item. If the module cannot fully contain all the personalization items, a "more" 
link will be provided, which when clicked, will present a sliding sheet to reveal the rest of the 
list. 

[0060] Preferences may contain actively customizing the types of alerts or content the 
module presents and filters, it may also include color customization, graphical element and 
30 other personalization features. 

[0061] Such layers might be used in various areas of a portal site, such as a main 
page, a music page, a movies page, a games page, a sports page, a local new/information 
page and/or a news page. In some cases, a user might request a page having such DHTML 
elements, but not have a browser capable of processing DHTML constructs. In such cases, 



the DHTML page would be configured to substitute other functionality, such as sending the 
user to a separate page listing all the items when they click on "more". 

[0062] Yet another dynamic page is illustrated in Fig. 8. There, a premium 
promotional module is shown, which rotates among a series of promotional or informational 
items, using a consistent and unobtrusive animated transition. The items appear in one of a 
plurality of spaces, and the items might transition from spaces in a staggered schedule so that 
they to not all transition at once. By way of example, a top page of a portal web site might 
contain a promotional module. 

[0063] The transition might be consistent with other transitions of other dynamic 
pages, such as an animation, fade in, box in, etc. The rotation can occur even if the user is 
idle, preferably being unobtrusive and consistent throughout the module. If the user rolls 
over a particular space, the rotation for that space will be paused, with rotation resuming 
when the user rolls away from the module or space. Links within the modules will act like 
regular links. Users with non-DHTML enabled browsers can be provided with such a set of 
spaces, but the rotation will likely not be present. 

[0064] One underlying architecture that could be used to present features described 
above is to have separate tools on layers of a DHTML page and move the layers by changing 
their position, thus obviating the need for a page refresh. Where some of the changes should 
be sticky, such as when the user drags one layer to a new position or changes positions of 
layers relative to each other, the change could be done without refreshing the page from the 
server, by the changes might be communicated to the server so that the next time the user 
comes to that page, the layers are in the order the user put them in at the last visit. In effect, 
this allows the user to drag and drop portions of a portal page layout, for example, and see 
them move relative to each other at speeds that might not be possible given network and/or 
server conditions. The communication of the change can be sent to the server without 
blocking the movement at the user's machine. In addition to communicating changes, 
references that a user makes, such as navigating a submenu or selecting an item for further 
detail, can be communicated to the server even though server action is not needed to respond 
to the user's action. 

[0065] The above description is illustrative and not restrictive. Many variations of 
the invention will become apparent to those of skill in the art upon review of this disclosure. 
The scope of the invention should, therefore, be determined not with reference to the above 
description, but instead should be determined with reference to the appended claims along 
with their full scope of equivalents. 
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